# Typed CSS Modules 插件

import { SourceCode } from 'rspress/theme';

<SourceCode href="https://github.com/web-infra-dev/rsbuild/tree/main/packages/plugin-typed-css-modules" />

Typed CSS Modules 插件用于为项目中的 CSS Modules 文件生成类型声明文件。

## 快速开始

### 安装插件

你可以通过如下的命令安装插件:

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @rsbuild/plugin-typed-css-modules -D" />

### 注册插件

你可以在 `rsbuild.config.ts` 文件中注册插件：

```ts title="rsbuild.config.ts"
import { pluginTypedCSSModules } from '@rsbuild/plugin-typed-css-modules';

export default {
  plugins: [pluginTypedCSSModules()],
};
```

## 示例

通过添加 Typed CSS Modules 插件，Rsbuild 会为项目中所有的 CSS Modules 文件生成类型声明文件。

例如，创建 `src/index.ts` 和 `src/index.module.css` 两个文件：

```tsx title="src/index.ts"
import styles from './index.module.css';

console.log(styles.pageHeader);
```

```css title="index.module.css"
.page-header {
  color: black;
}
```

构建后，Rsbuild 会自动生成 `src/index.module.css.d.ts` 类型声明文件：

```ts title="src/index.module.css.d.ts"
interface CssExports {
  'page-header': string;
  pageHeader: string;
}
declare const cssExports: CssExports;
export default cssExports;
```

此时再打开 `src/index.ts` 文件，可以看到 `styles` 对象已经具备了准确的类型。

## 具名导出

在开启 [output.cssModules.namedExport](/config/output/css-modules#cssmodulesnamedexport) 的情况下，生成的类型声明文件仅会包含具名导出。

比如：

```css title="index.module.css"
.page {
  color: black;
}
.header {
  color: white;
}
```

生成的类型：

```ts title="src/index.module.css.d.ts"
export const page: string;
export const header: string;
```

## 配置 Git

在上述例子中，`src/index.module.css.d.ts` 是编译生成的代码，你可以选择将它们提交到 Git 仓库里，也可以选择在 `.gitignore` 文件中忽略它们：

```bash
# Ignore auto generated CSS declarations
*.module.css.d.ts
*.module.sass.d.ts
*.module.scss.d.ts
*.module.less.d.ts
*.module.styl.d.ts
*.module.stylus.d.ts
```

此外，如果生成的代码导致了 ESLint 报错，你也可以将上述配置添加到 `.eslintignore` 文件里。
